<template>
  <div class="image-container">
    <fm-nav-bar
      title="图片信息"
      :border="false"
      left-arrow
      @click-left="back"
    />
    <div class="image-box">
      <div class="box1">
        <fm-cell-group inset>
          <fm-cell
            title="宽度"
            :value="photo.images[0] ? photo.images[0].width : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            title="高度"
            :value="photo.images[0] ? photo.images[0].height : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            title="尺寸"
            :value="photo.images[0] ? photo.images[0].size : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            :border="false"
            title="路径"
            :value="photo.images[0] ? photo.images[0].path : '暂无数据'"
            title-class="title"
            value-class="value"
          />
        </fm-cell-group>
      </div>
      <div class="box2">
        <fm-cell-group inset>
          <fm-cell
            title="是否原图"
            :value="
              photo.images[0] ? (photo.isOrigin ? '是' : '否') : '暂无数据'
            "
            title-class="title"
            value-class="value"
          />
          <fm-cell
            title="资源标识符"
            :value="photo.images[0] ? photo.images[0].uri : '暂无数据'"
            title-class="title"
            value-class="value"
          />
        </fm-cell-group>
      </div>
      <div class="tips">多选图片时，仅展示第一张图片信息。</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ImagePick',
  data() {
    return {
      photo: {
        images: '',
        path: '',
        width: '',
        height: '',
        size: '',
        uri: '',
        isOrigin: '',
      },
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
  },
  mounted() {
    if (typeof yuanchu != 'undefined') {
      //拍照
      //   yuanchu?.imagePicker?.takePhoto(
      //     (res) => {
      //       this.photo = res
      //     },
      //     (err) => {
      //       console.log(err)
      //     },
      //     {
      //       width: 1920,
      //       height: 1440,
      //       quality: 50,
      //     }
      //   )
      //获取图片
      yuanchu?.imagePicker?.getPictures(
        (res) => {
          this.photo = res
        },
        (err) => {
          console.log(err)
        },
        {
          maximumImagesCount: 9,
          width: 1920,
          height: 1440,
          quality: 100,
        }
      )
    }
  },
}
</script>
<style lang="less" scoped>
.image-container {
  height: 100%;
  background-color: #f2f3f5;
}
.image-box {
  margin: 24px 0px;
}
.box1 {
  margin-bottom: 24px;
}
.title {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #15171a;
  line-height: 40px;
}
.value {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727478;
  line-height: 40px;
}
.tips {
  margin: 24px 30px;
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #b5b9be;
  line-height: 40px;
}
</style>
